<template>
  <div class="freight-template">
    <search-table :url="url" ref="searchtable" :form="form" :columns="columns">

      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="分销商名称">
            <a-input
              v-decorator="[
                'companyName',
              ]"
              placeholder="请输入分销商名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
              style="width: 150px"
              allowClear
              :options="distributorStateOptions"
              v-decorator="[
                'distributorStatus',
              ]"
              placeholder="请选择状态"
            >
          </a-select>
        </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="distributor:add">
          <a-button @click="openInfo({}, 'infoVisible')" type="primary" icon="plus">新增分销商</a-button>
        </permission>
       <!-- <permission authority="distributor:delete">-->
        <permission authority="">

            <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)" type="danger" icon="delete">删除</a-button>
        </permission>

        <!--<permission authority="distributor:type:manage">-->
        <permission authority="">
          <a-button @click="openInfo({}, 'typeVisible')" type="default">分销商分类</a-button>
        </permission>

      </template>
      <template slot="tableOperation" slot-scope="{record}">
        <permission authority="distributor:modify">
          <span class="text-primary pointer" @click="openInfo(record, 'infoVisible')">编辑</span>
        </permission>
        <permission authority="distributor:modify">
          <a-divider type="vertical" />
          <span class="pointer" :class="record.distributorStatus == 1 ? 'text-danger' : 'text-primary'"
                      @click="openStop(record)">
            <template v-if="record.distributorStatus==1">禁用</template>
            <template v-else>启用</template>
          </span>
        </permission>
<!--        <permission authority="distributor:delete">-->
        <permission authority="">
          <a-divider type="vertical" />
          <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
        <!-- <permission authority="distributor:info">
          <a-divider type="vertical" />
          <span class="text-primary pointer" @click="openDetail(record, 'infoVisible')">详情</span>
        </permission> -->
<!--        <permission authority="distributor:contacts.manage">-->
        <permission authority="">
          <a-divider type="vertical" />
          <span class="text-primary pointer" @click="openInfo(record, 'contactsVisible')">联系人管理</span>
        </permission>
        <!-- <permission authority="withdraw:config:info">
          <a-divider type="vertical" />
          <span class="text-primary pointer" @click="withdrawSet(record)">提现设置</span>
        </permission> -->
      </template>
    </search-table>
    <distributor-info :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
    <type-manage @cancel="closeInfoModal" :visible="typeVisible" />
    <contacts-manage :record="currentRecord" @cancel="closeInfoModal" :visible="contactsVisible" />
    <!-- 提现设置 -->
    <WithdrawSet ref="WithdrawSet" :record="currentRecord" :visible="withdrawSetVisible" @cancel="closeInfoModal"></WithdrawSet>
  </div>
</template>
<script>
import DistributorInfo from './components/DistributorInfo'
import TypeManage from './components/TypeManage'
import ContactsManage from './components/ContactsManage'
import WithdrawSet from './components/WithdrawSet'

export default {
  name: 'distributor-manage',
  data () {
    return {
      url: '/distributor/page',
      infoVisible: false,
      typeVisible: false,
      contactsVisible: false,
      withdrawSetVisible: false, // 提现设置弹窗是否显示
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns:  [
        {
          title: '分销商名称',
          dataIndex: 'companyName',
        },
        {
          title: '分销商编号',
          dataIndex: 'distributorCode',
        },
        {
          title: '分销商分类',
          dataIndex: 'distributorTypeName',
        },
        {
          title: '创建人',
          dataIndex: 'createByName',
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
        },
        {
          title: '状态',
          dataIndex: 'distributorStatus',
          customRender: text=> (['已禁用', '已启用'][text])
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }],
        distributorStateOptions: [
          {label: '已启用', value: "1"},
          {label: '已禁用', value: "0"},
        ],
    }
  },
  components: {
    DistributorInfo,
    TypeManage,
    ContactsManage,
    WithdrawSet
  },
  methods:{
    openStop (record) {
      let status = record.distributorStatus == 1 ? 0 : 1
      this.$confirm({
        title: status ? '启用提示' : '禁用提示',
        content: status ? '确定启用操作？' : '确定禁用操作？',
        okText: status ? '确认启用' : '确认禁用',
        cancelText: '取消',
        onOk: () => {
          this.$post('/distributor/update', { distributorStatus:status, id: record.id }).then(res => {
          if (res && res.returnCode == 1000) {
              this.$message.success((status ? '启用' : '禁用') + '成功')
              this.$refs.searchtable.refreshTable()
           }
          })
        }
      })
    },
    closeInfoModal (freshTable) {
      this.infoVisible = false
      this.typeVisible = false
      this.contactsVisible = false
      this.withdrawSetVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openInfo (record,type) {
      this.currentRecord = record || {}
      this[type] = true
    },
    // 提现设置
    withdrawSet(record) {
      this.currentRecord = record || {}
      this.withdrawSetVisible = true
    },
    deleteRows (ids) {
      if (!(ids && ids.length)) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          this.$post('/distributor/delete', ids).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },
  }
}
</script>